<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_防抖_lodash</title>
</head>
<!-- 引入lodash: lodash全部的功能引入 -->
<script src="./lodash.js"></script>

<body>
  <!-- 
    防抖: 
      前面的所有的触发都取消, 最后一次执行在规定的时间之后才触发
      也就是说如果连续快速的触发 只会执行一次
  -->



    <p>
      原始的: <input id="Inp" type="text">
    </p>
  <hr>
    <p>
      lodash防抖: <input id="debounce" type="text">
    </p>


  <!-- 原始的 -->
  <script>
    const Inp = document.getElementById('Inp');
    // 文本发生变化立即执行
    Inp.oninput = function () {
      console.log('立即执行 ajax发请求');
    }
  </script>



  <!-- lodash防抖 -->
  <script>
    const Debounce = document.getElementById('debounce');
    // 防抖: 连续触发 只执行最后一次的回调.
    // lodash插件: 里面封装函数的防抖与节流的业务【闭包+延迟器】
    // 1: lodash函数库对外暴露 _函数
    const request = function() {
      console.log('ajax发请求 防抖');
    }
    Debounce.oninput = _.debounce( request, 1000);
  </script>
</body>

</html>
